<template>
  <div>
    <div class="banner">
      <div class="backgroundBule"></div>
      <div class="cont">
        <div class="btnRight">
          <span @click="stateClcik">成为供应商</span>
        </div>
        <div class="search">
          <input
            class="input"
            type="text"
            placeholder="搜索你想要的商品"
            placeholder-style="color:#fff"
            v-model="seek"
            maxlength="11"
            confirm-type="search"
            @confirm="seekClick"
          />
          <icon
            class="searchClick"
            type="search"
            size="20"
            color="#fff"
            @click="searchClick"
          />
        </div>
      </div>
    </div>
    <div class="swiper">
      <swiper
        :indicator-dots="false"
        :autoplay="false"
        easing-function="easeOutCubic"
        next-margin="120px"
        previous-margin="120px"
        @change="swiperChnage"
        :current="current"
      >
        <div v-for="(item,index) in swiperList" :key="index">
          <swiper-item
            style="display:flex;flex-direction: column;align-items: center;justify-content: center;"
          >
            <img
              :src="item.img"
              :alt="item.goodsTypeName"
              mode="aspectFit"
              style="width: 50px;height: 50px;"
            />
            <span class="swiper-item">{{item.goodsTypeName}}</span>
          </swiper-item>
        </div>
      </swiper>
    </div>
    <div class="content">
      <scroll-view class="left" scroll-y style="height:calc(100% - 10px)">
        <div
          v-for="(item,index) in swiperList2"
          :key="index"
          :class="item.isClick ? 'opt' : ''"
          @click="optClcik(item)"
        >{{item.goodsTypeName}}</div>
      </scroll-view>
      <div class="right">
        <scroll-view
          class="scroll-wrap no-scroll-bar"
          scroll-y
          @scrolltolower="handleLoadMore"
          style="height:calc(100% - 10px)"
        >
          <div v-for="(item,idx) in list" :key="idx" class="goods-block">
            <div @click="findShopInfo(item)">
              <span>{{item.goodsName}}</span>
              <img :src="item.goodsImg" mode="aspectFit" />
              <p>￥{{item.goodsDiscount}}</p>
            </div>
            <button @click="disMoneyClick(item)" class="disMoney">分销赚钱</button>
          </div>
          <p v-if="!alreadyLastPage" class="end-tip">没有更多了</p>
        </scroll-view>
      </div>
    </div>
    <div class="box">
      <div class="zz"></div>
    </div>
    <button class="btn" @click="myDisClick">分销中心</button>
    <vue-tab-bar
      @fetch-index="clickIndexNav"
      :selectNavIndex="selectNavIndex"
      :needButton="needButton"
    ></vue-tab-bar>
  </div>
</template>

<script>
import vueTabBar from '../../../../components/vueTabBarDis'
import {
  FIND_SHOP_PLATFORM_TYPE_LIST_API,
  FIND_SHOP_GOODS_PAGE,
  CREATE_GOODS_DIS_API,
  FIND_SHOP_KIND_APPLY_PAGE_API,
  CREATE_SHOP_KIND_APPLY_API
} from '@/api'

export default {
  components: { vueTabBar },
  props: {},
  data () {
    return {
      swiperList: [],
      swiperList2: [],
      currentPage: 1,
      alreadyLastPage: false,
      current: 0,
      sonVal: null,
      disShopList: '',
      list: [],
      state: '',
      seek: '',
      selectNavIndex: 1,
      needButton: true
    }
  },
  computed: {
    account () {
      // return this.$store.state.account
      return this.$cookie.get('account')
    }
  },
  watch: {},
  created () {},
  mounted () {},
  onShow () {
    this._findShopKindApplyPageApi()
    this.getDisShopList()
    wx.hideTabBar()
  },
  methods: {
    seekClick () {
      const vm = this
      vm.listInit()
      vm._findShopList()
    },
    searchClick () {
      const vm = this
      vm.listInit()
      vm._findShopList()
    },
    stateClcik () {
      const vm = this
      if (vm.account.shopKind === 'SUPPLIER') {
        vm.$toast('你已经成功供货商，请勿重新申请')
      } else {
        vm.$dialog('确定申请成功供货商').then(r => {
          vm._createShopKindApplyApi()
        })
      }
    },
    findShopInfo (item) {
      this.$router.push(
        `/pages/shop-management/dis/dis-shop-info/main?goodsNo=${item.goodsNo}`
      )
    },
    myDisClick () {
      this.$router.push(`/pages/shop-management/dis/dis-centre/main`)
    },
    disMoneyClick (item) {
      const vm = this
      wx.showModal({
        title: `可赚钱佣金：￥${item.disAmount}`,
        content: `供货价：￥${item.goodsDiscount}`,
        showCancel: true,
        confirmText: '确定',
        confirmColor: '#5d93fd',
        success: function (res) {
          if (res.confirm) {
            vm.createGoodsShop(item.goodsNo)
          } else if (res.cancel) {
          }
        }
      })
    },
    createGoodsShop (goodsNo) {
      const vm = this
      CREATE_GOODS_DIS_API(vm.$store.state.account.shopId, goodsNo)
        .then(r => {
          if (r.data.code === '0') {
            vm.$alert('添加成功', '').then(() => {})
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    swiperChnage (e) {
      const vm = this
      vm.current = e.target.current
      vm.getDisShopList2(vm.swiperList[vm.current].id)
    },
    optClcik (item) {
      const vm = this
      vm.swiperList2.forEach(_ => {
        _.isClick = false
        if (item.goodsTypeName === _.goodsTypeName) {
          item.isClick = true
        }
      })
      vm.sonVal = item.id
      vm.listInit()
      vm._findShopList()
    },
    getDisShopList () {
      const vm = this
      let params = {
        providerId: vm.$store.state.account.providerId,
        isShow: '1', // 1/0 显示/隐藏
        parentId: 0
      }
      FIND_SHOP_PLATFORM_TYPE_LIST_API(params)
        .then(r => {
          if (r.data.code === '0') {
            vm.swiperList = r.data.data
            if (!vm.swiperList2.length) {
              vm.getDisShopList2(vm.swiperList[0].id)
            }
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    getDisShopList2 (parentId) {
      const vm = this
      let params = {
        providerId: vm.$store.state.account.providerId,
        isShow: '1', // 1/0 显示/隐藏
        parentId: parentId
      }
      FIND_SHOP_PLATFORM_TYPE_LIST_API(params)
        .then(r => {
          if (r.data.code === '0') {
            vm.swiperList2 = r.data.data

            vm.swiperList2.forEach(_ => {
              _.isClick = false
            })
            vm.swiperList2[0].isClick = true
            // if (!vm.sonVal) {
            vm.sonVal = vm.swiperList2[0].id
            vm.listInit()
            vm._findShopList()
            // }
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    handleLoadMore () {
      if (!this.alreadyLastPage) {
        this._findShopList()
      }
    },
    _findShopList () {
      const vm = this
      let params = { ...vm.form }
      params.providerId = vm.account.providerId
      params.state = 1
      params.goodsName = vm.seek
      params.isDis = 'Y'
      if (vm.seek) {
        params.goodsName = vm.seek
      }
      if (vm.sonVal) {
        params.goodsPlatformTypeId = vm.sonVal
        // params.goodsTypeId = vm.sonVal
      }

      FIND_SHOP_GOODS_PAGE(params, vm.currentPage, 10)
        .then(r => {
          if (r.data.code === '0') {
            let { isFirstPage, isLastPage, list } = r.data.data
            vm.printList(list, isFirstPage, isLastPage)
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    }, // 商品列表
    printList (list, isFirst, isLast) {
      const vm = this
      if (isFirst) {
        vm.list = list
        if (isLast || !list.length) {
          vm.alreadyLastPage = true
        } else {
          vm.alreadyLastPage = false
          vm.currentPage += 1
        }
      } else if (isLast) {
        vm.list.push(...list)
        vm.alreadyLastPage = true
      } else {
        vm.list.push(...list)
        vm.alreadyLastPage = false
        vm.currentPage += 1
      }
    },
    _findShopKindApplyPageApi () {
      const vm = this
      let params = {
        phone: vm.$cookie.get('account').cellphone,
        shopId: vm.$cookie.get('account').shopId,
        shopKind: 'SUPPLIER'
      }
      FIND_SHOP_KIND_APPLY_PAGE_API(params, 1, 1)
        .then(r => {
          if (r.data.code === '0') {
            if (r.data.data.list.length) {
              let state = r.data.data.list[0].state
              vm.state = state
              // if (state === '0') {
              //   vm.entity2 = '申请中'
              // } else if (state === '1') {
              //   vm.entity2 = '已通过'
              // } else if (state === '2') {
              //   vm.entity2 = '未通过'
              // }
            }
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    _createShopKindApplyApi () {
      const vm = this
      let params = {
        shopId: vm.$cookie.get('account').shopId,
        shopKind: 'SUPPLIER'
      }
      CREATE_SHOP_KIND_APPLY_API(params)
        .then(r => {
          if (r.data.code === '0') {
            wx.showModal({
              title: '资料提交成功',
              content:
                '我们会在1-3个工作日内处理您的申请若有问题请致电400-888-5115',
              showCancel: false,
              confirmText: '确定',
              confirmColor: '#5d93fd',
              success: function (res) {
                if (res.confirm) {
                  // vm.$router.go(-1)
                  vm._findShopKindApplyPageApi()
                }
              },
              fail: function (err) {
                console.error(err)
              }
            })
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    listInit () {
      const vm = this
      vm.list = []
      vm.currentPage = 1
      vm.alreadyLastPage = false
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';
</style>
